<template>
	<tui-navigation-bar splitLine @init="initNavigation" title="消息">
		<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
			<tui-icon name="arrowleft" color="#000" @click="back"></tui-icon>
		</view>
	</tui-navigation-bar>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	const top = ref(0)

	const initNavigation = (e) => {
		top.value = e.top;
	}
	const back = () => {
		uni.navigateBack();
	}
</script>

<style lang="scss" scoped>
	/* 样式 */
	.tui-header-icon {
		width: 100%;
		position: fixed;
		top: 0;
		padding: 0 12rpx;
		display: flex;
		align-items: center;
		height: 32px;
		transform: translateZ(0);
		z-index: 99999;
		box-sizing: border-box;
	}
</style>